@tailwind base;
@tailwind components;
@tailwind utilities;

//=====================================apply=====================================
.center {
  @apply flex items-center justify-center;
}

.between-x {
  @apply flex justify-between;
}

.between-xc {
  @apply flex flex-col items-center justify-between;
}

.center-x {
  @apply flex justify-center;
}

//=====================================basic=====================================
$bs-body-bg-rgb: rgb(33, 37, 41);
$bs-primary-rgb: rgb(13, 110, 253);
$bd-accent-rgb: rgb(255, 228, 132);
$bd-violet-rgb: rgb(112.520718, 44.062154, 249.437846);
$bd-pink-rgb: rgb(214, 51, 132);
$main-red: #dc3545;
$main-green: #198754;
$main-yellow: #ffc107;
$main-nop: #A9A9A9;

* {
  margin: 0;
  padding: 0;
  cursor: default;
  box-sizing: border-box;
}

*::selection {
  background-color: transparent;
}

@font-face {
  font-family: 'DigitalNumbers';
  src: url('@/assets/fonts/DigitalNumbers.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.digital {
  font-family: "DigitalNumbers" !important;
}

.text-nop {
  color: $main-nop !important;
}

.text-red {
  color: $main-red !important;
}

.bg-red {
  background-color: $main-red !important;
}

.bg-green {
  background-color: $main-green !important;
}

.bg-yellow {
  background-color: $main-yellow !important;
}

@mixin circle-glassmorphism($size) {
  width: $size;
  height: $size;
  border-radius: 50%;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.5), 
    inset 0 -2px 4px rgba(0, 0, 0, 0.25), 
    0 2px 6px rgba(0, 0, 0, 0.3);
}


//=====================================custom=====================================

// Variables
$bs-body-bg-rgb: rgb(33, 37, 41);
$bs-primary-rgb: rgb(13, 110, 253);
$bd-accent-rgb: rgb(255, 228, 132);
$bd-violet-rgb: rgb(112, 44, 249);
$bd-pink-rgb: rgb(214, 51, 132);
$main-red: #dc3545;
$main-green: #198754;
$main-yellow: #ffc107;
$main-nop: #A9A9A9;

// Mixins
@mixin circle-glassmorphism($size) {
  width: $size;
  height: $size;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 
              inset 0 -2px 4px rgba(0, 0, 0, 0.25), 
              0 2px 6px rgba(0, 0, 0, 0.3);
}

// Base styles
* {
  margin: 0;
  padding: 0;
  cursor: default;
  box-sizing: border-box;
}

*::selection {
  background-color: transparent;
}

@font-face {
  font-family: 'DigitalNumbers';
  src: url('@/assets/fonts/DigitalNumbers.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.digital {
  font-family: "DigitalNumbers" !important;
}

// Utility classes
.text-nop {
  color: $main-nop !important;
}

.text-red {
  color: $main-red !important;
}

.bg-red {
  background-color: $main-red !important;
}

.bg-green {
  background-color: $main-green !important;
}

.bg-yellow {
  background-color: $main-yellow !important;
}

// Components
.paper {
  background-image: 
    linear-gradient(180deg, rgba($bs-body-bg-rgb, 0.01), rgba($bs-body-bg-rgb, 1) 85%),
    radial-gradient(ellipse at top left, rgba($bs-primary-rgb, 0.5), transparent 50%),
    radial-gradient(ellipse at top right, rgba($bd-accent-rgb, 0.5), transparent 50%),
    radial-gradient(ellipse at center right, rgba($bd-violet-rgb, 0.5), transparent 50%),
    radial-gradient(ellipse at center left, rgba($bd-pink-rgb, 0.5), transparent 50%);
}

.result {
  width: 100%;
  position: relative;
  left: 50%;
  top: 0;
  transform: translate(-50%, -25%);
  width: calc(100vh / 1.45);
  &-circle {
     @include circle-glassmorphism(40px);
  }
}

.score-group {
  position: relative;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: calc(100vh / 1.65);
  .circle {
    font-size: 32px;
    @include circle-glassmorphism(72px);
    span {
      color: #fff;
    }
  }
}

.display {
  padding: 0 4px;
  border-radius: 8px;
  background-color: #000;
}

.setting-group {
  width: 100%;
  position: relative;
  left: 50%;
  width: calc(100vh / 1.45);
  transform: translateX(-50%);
  
  .buttons {
    width: 100%;
    gap: 16px;
    background-color: transparent;
    margin-top: 8px;
    .item {
      display: flex;
      gap: 8px;
      flex-direction: column;
    }
    button {
      border: none;
      outline: none;
      border-radius: 50%;
      color: #fff;
      background: rgba(13, 110, 253, 0.8);
      @include circle-glassmorphism(52px);
      
      &:before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        z-index: -1;
        transition: opacity 0.3s ease;
        opacity: 0;
      }

      &:hover:before {
        opacity: 1;
      }

      &:active {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25),
                    inset 0 6px 12px rgba(255, 255, 255, 0.2);
        transform: translateY(6px);
      }

      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}

.marquee-panel {
  position: relative;
  left: 50%;
  top: 0;
  transform: translate(-50%, -1%);
  width: calc(100vh / 1.25);
  height: calc(100vh / 1.65);

  .circle {
    position: absolute;
    color: white;
    font-size: 10px;
    @include circle-glassmorphism(60px);
  }

  .inner {
    width: 100%;
    height: 100%;
    position: absolute;

    &-box {
      width: 45%;
      height: 45%;
    }
  }

  .color {
    width: 100%;
  }

  .color-circle {
    color: white;
    font-weight: bold;
    @include circle-glassmorphism(50px);
  }
}


@keyframes blink-red {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: $main-red;
  }
}

@keyframes blink-yellow {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: $main-yellow;
  }
}

@keyframes blink-green {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: $main-green;
  }
}

.blinking-red {
  animation: blink-red 0.6s infinite;
}

.blinking-yellow {
  animation: blink-yellow 0.6s infinite;
}

.blinking-green {
  animation: blink-green 0.6s infinite;
}